//waterfall.vue
<template>
	<view class="waterfall">
		<view class="left">
			<block v-for="(item,index) in leftList" :key="index">
				<view class="waterfall-item" :class="item.type==2?'type2':''" @click="toUrl(item)">
					
					<image :src="`${tempUrl}${item.coverimg}`" :class="item.type==2?'type2Img':''" mode="widthFix"
						lazy-load @load="onImageLoad">
					</image>
					
					<view class="title" v-if="item.type==1">{{ item.title }}</view>
					<view class="title" v-else>{{item.gname}}</view>
					<view v-if="item.type==2" style="font-size: 36rpx;font-weight: 700;padding-left: 15rpx;">
						￥{{item.price}}
					</view>
					<view class="person" v-if="item.type==1">
						<view class="person-left">
							<block v-if="item.author.avatar">
							<image :src="`${tempUrl}${item.author.avatar}`" class="avatar"
								@error="imgerror($event, index)"></image>
							</block>
							<block v-else>
								<image src="../../static/default/default-avatar.png"
								class="avatar"
									@error="imgerror($event, index)"></image>
								
							</block>
							<text class="name"
								v-if=" item.author.name.length>6">{{item.author.name.slice(0,7)}}...</text>
							<text class="name" v-if=" item.author.name.length<=6">{{item.author.name}}</text>
						</view>
					
						<view class="person-right" v-if="item.type==1">
							<uni-icons type="heart" size="16" color="#777"></uni-icons>
							<text>{{item.click?item.click:0}}</text>
						</view>
						
					</view>
				</view>
			</block>
		</view>
		<view class="right">
			<block v-for="(item, index) in rightList" :key="index">
				<view class="waterfall-item" :class="item.type==2?'type2':''" @click="toUrl(item)">
					<image :src="`${tempUrl}${item.coverimg}`" :class="item.type==2?'type2Img':''" mode="widthFix"
						lazy-load @load="onImageLoad">
					</image>
					<view class="title" v-if="item.type==1">{{ item.title }}</view>
					<view class="title" v-else>{{item.gname}}</view>
					<view v-if="item.type==2" style="font-size: 36rpx;font-weight: 700;padding-left: 15rpx;">￥{{item.price}}</view>
					<view class="person" v-if="item.type==1">
						<view class="person-left">
							<block v-if="item.author.avatar">
							<image :src="`${tempUrl}${item.author.avatar}`" class="avatar"
								@error="imgerror($event, index)"></image>
							</block>
							<block v-else>
								<image src="../../static/default/default-avatar.png"
								class="avatar"
									@error="imgerror($event, index)"></image>
								
							</block>
							<text class="name"
								v-if=" item.author.name.length>6">{{item.author.name.slice(0,7)}}...</text>
							<text class="name" v-if=" item.author.name.length<=6">{{item.author.name}}</text>
						</view>
					
						<view class="person-right" v-if="item.type==1">
							<uni-icons type="heart" size="16" color="#777"></uni-icons>
							<text>{{item.click?item.click:0}}</text>
						</view>
						
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/common/js/request.js"
	export default {
		name: 'water-fall',
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		watch: {
			list(n, o) {
				let that = this;
				let ol = o.length;
				let nl = n.length;
				if (nl > ol) {
					if (this.leftHeight > this.rightHeight) {
						that.rightList.push(that.list[ol]);
					} else {
						that.leftList.push(that.list[ol]);
					}
					this.onImageLoad();
					console.log(this.leftList)
				}
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				itemIndex: 0,
				leftHeight: 0,
				rightHeight: 0,
				detailUrl:'/shopping/detail/detail',
				articleUrl:'/public/article/article',
				tempUrl:''
			};
		},
		created() {
			console.log(this.list)
			this.tempUrl=this.baseUrl
			this.leftList = [this.list[0]]; //第一张图片入栈
		},
		destroyed() {
			console.log('destroy');
		},
		methods: {
			toUrl(item){
				//1=图文 //2-商品详情页
				console.log(item)
				if(item.type==1){
					uni.navigateTo({
						url: `${this.articleUrl}?data=${encodeURIComponent(JSON.stringify(item))}`
					});
				}else{
					uni.navigateTo({
						url: `${this.detailUrl}?data=${encodeURIComponent(JSON.stringify(item))}`
					});
				}
			},
			imgerror(event, index) {
				// console.log(event)
			},
			onImageLoad(e) {
				if (!e) {
					console.log('无图片！！！！');
					return;
				}
				//图片显示高度加上下面的文字的高度100rpx,加上margin-bottom20rpx
				let imgH = (e.detail.height / e.detail.width) * 345 + 100 + 20;
				let that = this;
				if (that.itemIndex === 0) {
					that.leftHeight += imgH; //第一张图片高度加到左边
					that.itemIndex++;
					that.rightList.push(that.list[that.itemIndex]); //第二张图片先入栈
				} else {
					that.itemIndex++;
					//再加高度
					if (that.leftHeight > that.rightHeight) {
						that.rightHeight += imgH;
					} else {
						that.leftHeight += imgH;
					}
					if (that.itemIndex < that.list.length) {
						//下一张图片入栈
						if (that.leftHeight > that.rightHeight) {
							that.rightList.push(that.list[that.itemIndex]);
						} else {
							that.leftList.push(that.list[that.itemIndex]);
						}
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.waterfall {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;

		.left,
		.right {

			.waterfall-item {
				border-radius: 25rpx;
				width: 350rpx;
				margin-bottom: 20rpx;
				background-color: white;
				box-sizing: border-box;
				box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;

				image {
					will-change: transform;
					border-top-left-radius: 25rpx;
					border-top-right-radius: 25rpx;
					width: 350rpx;
					display: block;
				}

				.type2Img {
					border-radius: unset;
				}

				.title {
					text-align: left;
					padding: 10rpx 18rpx;
					width: 345rpx;
					// height: 100rpx;
					font-size: 24rpx;
					letter-spacing: 4rpx;
					font-weight: 400;
					overflow: hidden;
				}
				
			}

			.type2 {
				padding: 0 0 20rpx;
				border-radius: unset;
			    .title{
					color: #6A6A6A;
					height: 80rpx;
					width: 300rpx;
					text-align: left;
					font-size: 32rpx;
					overflow: hidden;
				}
			}
		}

		.person {
			padding: 0 18rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;;

			.person-left {
				font-size: 20rpx;
				display: flex;
				align-items: center;

				.avatar {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}

				.name {
					color: #777;
					margin-left: 12rpx;
				}
			}

			.person-right {
				display: flex;
				align-items: center;
				margin-left: 8rpx;

				text {
					margin-left: 8rpx;
					color: #777;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
